<template>
	<view class="filterContent">
		<view class="line"></view>
		<view class="title">筛选</view>
		<view class="all">
			<view class="content"><view :class="['contentItem', showAllActive ? 'active' : '']" @click="clickAll">全部</view></view>
		</view>
		<view class="all" v-for="(item, index) in list" :key="index">
			<view class="desc">{{ item.name }}</view>
			<view class="content">
				<view
					:class="[
						'contentItem',
						selectList.find(d => {
							return d == e;
						})
							? 'active'
							: ''
					]"
					@click="clickItem(e)"
					v-for="(e, v) in item.list"
					:key="v"
				>
					{{ e.name }}
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="reset" @click="handleReset">重置</view>
			<view class="confirm" @click="handleConfirm">{{ confirmTxt }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: ()=>[]
		},
		// 父组件已选的
		test: {
			type: Array
		}
	},
	data() {
		return {
			confirmTxt: '确定',
			selectList: [],
			allFlag: false
		};
	},
	created() {
		console.log(this.test, '父组件的值');
		this.selectList = this.test;
	},
	watch: {
		// test(val){
		//  	console.log(val,'val的值')
		// 	this.selectList=val
		// 	console.log(this.selectList,'渲染已选')
		// 	// this.$forceUpdate()
		// }
	},
	computed: {
		// 全部选项的条数
		allCount() {
			let count = 0;
			this.list.forEach(item => {
				count += item.list.length;
			});
			return count;
		},
		showAllActive() {
			return this.allCount === this.selectList.length ? true : false;
		}
	},
	methods: {
		// activeFlag(list,e){
		// 	return list.find(item=>item===e)?true:false
		// },
		clickAll() {
			if (this.selectList.length == this.allCount) {
				this.selectList = [];
			} else {
				const allList = [];
				this.list.forEach(item => {
					item.list.forEach(v => {
						allList.push(v);
					});
				});
				this.selectList = allList;
				console.log(this.selectList.length, this.allCount);
			}
		},
		// 点击单个
		clickItem(e) {
			if (this.selectList.find(item => item == e)) {
				let index = this.selectList.findIndex(v => v == e);
				this.selectList.splice(index, 1);
			} else {
				this.selectList.push(e);
			}
			this.$emit('clickTag', this.selectList);
		},
		// 重置
		handleReset() {
			this.selectList = [];
		},
		// 确定
		handleConfirm() {
			console.log(this.selectList, 777);
			this.$emit('confirm', this.selectList);
		},
		ifCompare(object1, object2) {
			var o1keys = Object.keys(object1);
			var o2keys = Object.keys(object2);
			if (o2keys.length !== o1keys.length) return false;
			for (let i = 0; i <= o1keys.length - 1; i++) {
				let key = o1keys[i];
				if (!o2keys.includes(key)) return false;
				if (object2[key] !== object1[key]) return false;
			}
			return true;
		},
		// aa(e) {
		// 	let flag=false
		// 	this.selectList.forEach((item)=>{
		// 	 return this
		// 	})
		// }
	}
};
</script>

<style lang="scss">
.filterContent {
	width: 750rpx;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
	padding: 48rpx 40rpx 34rpx 40rpx;
	.line {
		width: 64rpx;
		height: 10rpx;
		background: #d8d8d8;
		border-radius: 6rpx;
		top: 12px;
		left: 342rpx;
		position: absolute;
	}
	.title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 16rpx;
	}
	.all {
		margin-bottom: 48rpx;
		.desc {
			color: #999;
			font-size: 24rpx;
			// margin-bottom: 14rpx;
		}
	}
	.content {
		display: flex;
		flex-wrap: wrap;
		.contentItem {
			font-size: 28rpx;
			padding: 4rpx 24rpx;
			border: 2rpx solid #cccccc;
			border-radius: 8rpx;
			color: #666;
			margin-right: 16rpx;
			margin-top: 14rpx;
		}
		.active {
			border: 2rpx solid #0091ff;
			color: #0091ff;
		}
	}
	.bottom {
		display: flex;
		view {
			display: flex;
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			height: 70rpx;
			justify-content: center;
			align-items: center;
			border-radius: 0rpx 8rpx 8rpx 0rpx;
		}
		.reset {
			background: #f5fbff;
			color: #0091ff;
		}
		.confirm {
			color: #fff;
			background-color: #0091ff;
		}
	}
}
</style>
